<template>
  <div id="contentRight">
    <section id="sec1">
      <p class="guide">
        <router-link to="/asset">资产总览&nbsp;&nbsp;>&nbsp;</router-link>
        <span>提现</span>
      </p>
      <p class="title">选择币种</p>
      <div class="d2">
        <div class="d1">
          <el-select v-model="selCoin" placeholder="请选择币种" class="leftValue">
            <el-option
              v-for="item in coins" :key="item.value" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <span class="s2">可用余额：{{cnyMoney}}CNY</span>
      </div>
      <p class="title">提现金额</p>
      <div class="d3">
        <input type="number" v-model="money" placeholder="请输入提现金额（限整数）" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')">
      </div>
      <p class="title">提现方式</p>
      <div class="d4">
        <div class="d1">
          <el-select v-model="selBank" :placeholder="bankPlaceholder" class="leftValue">
            <el-option
              v-for="item in bankCards" :key="item.id" :label=" `${item.bank_name} ( 尾号:${item.bank_card_num_format} )` " :value="item.id">
            </el-option>
          </el-select>
        </div>
        <router-link class="s2" to="addBank">添加银行卡</router-link>
      </div>
      <div class="d5">
        <button @click="sub">立即提现</button>
      </div>
    </section>
    <confirm-dialog ref="dl" v-bind:msg="safeInfo" @confirm="sure()" @cancel="cancel()"></confirm-dialog>
    <confirm-dialog ref="refAddCard" v-bind:msg="confirmAddBankCards" @confirm="sureAddCard()"></confirm-dialog>
    <confirm-dialog ref="needSetPws" :msg="needSetPws"></confirm-dialog>
    <get-phonecode ref="cashVerfiyCode" @confirm="cashWithDrawPost"></get-phonecode>
  </div>
</template>
<script>
  import {myAssets , ifNeedRechargeVerfy, getBindBanks , isSetTransactionPws , cashWithdrawCny, cashWithdrawOtc  } from '../http/api';
  export default {
    name : 'cashWithdraw',
    inject : ['reload'],
    data(){
      return{
        coins : [{value : 'CNY' }],//余额充值币种数组
        money : null,//提现金额
        selCoin : 'CNY', //选择的提现币种
        bankCards:[],
        selBank : null , //选择的银行卡id
        cnyMoney : 0, //cny余额
        verFyCode : null, //是否需要实名
        bankPlaceholder : null, //银行卡input提示
        safeInfo : require('../common/jsons/text').cashWithDrawVerification.html,//实名安全提示文字
        confirmAddBankCards :  require('../common/jsons/text').confirmAddBankCards.html,//提示添加银行卡
        isSetPws : false ,//是否设置交易密码
        needSetPws : require('../common/jsons/text').needSetPws.html, //弹窗：需要设置交易密码
      }
    },
    components:{
      ElSelect :  require('element-ui').Select, /*select*/
      ElOption : require('element-ui').Option, /*Option*/
      ConfirmDialog : resolve => { require(['../components/ConfirmDialog'], resolve) },/*确认弹窗*/
      GetPhonecode : resolve => { require(['../components/GetMbcode'], resolve) },/*提现验证弹窗*/
    },
    mounted() {
      let thiz = this;
      let Not = {noToast: true , noLoading: true};
      let https = [
        isSetTransactionPws(Not).then( res => {
          thiz.isSetPws =  Number(res.code) === 344 ? false : true;
        }),
        myAssets(Not).then(res => {
          if(res.code == 200){
            let data = res.data.res;
            thiz.cnyMoney = data.cny.CNY ?  thiz.numSlice( data.cny.CNY.availableAssetConversion , 2) : 0;//cny余额
          }
        }),
        ifNeedRechargeVerfy(Not).then(res => {
          //判断是否需要实名
          if (res.code == 200) {
            thiz.verFyCode = res.data;
          } else {
            thiz.verFyCode = 2
          }
        }),
        getBindBanks(Not).then(res => {
          //获取绑定的银行列表
          if( res.code == 200 ){
            let data = res.data.list;
            if( data.length > 0 ){
              thiz.for(data ,(item , index) => {
                item.cut_card_num = item.bank_card_num.substring(item.bank_card_num.length - 4);
              });
              thiz.bankCards = data;
              thiz.selBank = data[0].id; //默认第一个银行卡
              thiz.bankPlaceholder = "请选择银行卡";
            }else{
              thiz.bankPlaceholder = "还未添加提现银行卡";
            }
          }
        })
      ];
      this.PromiseAll(https);
    },
    watch:{
      money( val ){
        if( val > this.cnyMoney ){
          this.money = parseInt(this.cnyMoney);
        }
      },
    },
    methods:{
      showVerify() {
        //显示校验弹窗
        this.$refs.dl.dialogShow();
      },
      sure() {
        //校验弹窗点击确定
        if (this.verFyCode === 2) {
          this.$router.push({path: '/verFyCode', query: {rechargeVerify: true}});
        }
      },
      cancel() {
        // if (this.verFyCode === 2) {
        //   this.$router.replace({path: '/entrance'})
        // }
      },
      sureAddCard(){

      },
      sub(){
        //点击提现
        if( !this.isSetPws ){
          this.$refs.needSetPws.dialogShow();
        } else if (this.verFyCode == 2) {
          this.showVerify();//显示实名弹窗
        }else{
          var notCards = this.bankCards.length === 0;
          if(notCards){
            //判断是否添加银行卡
            this.$refs.refAddCard.dialogShow();
          }else if( !this.money ){
            require('../common/js/toast').toast('请输入提现金额');
          } else{
            this.$refs.cashVerfiyCode.dialogShow();
          }
        }
      },
      cashWithDrawPost( param ){
        //确认提现
        let toast = require('../common/js/toast').toast , thiz = this , unit = thiz.selCoin;
        let params = {
          amount : thiz.money,
          smscaptcha : param.code,
          currency_code : unit,
          card_id : thiz.selBank,
          trade_password : param.pws,
          noToast : true
        };
        switch (unit){
          case 'CNY' :
            cashWithdrawCny(params).then( res => {
              if( res.code == 200 ){
                toast('提现成功');
                thiz.$refs.cashVerfiyCode.hide();
                this.$router.push({path : 'cashwithdrawResult'});
              }else if( res.code == 609 ){
                thiz.$refs.dl.dialogShow();
              }else{
                toast(res.message);
              }
            });
            break;
          case 'OTC' :
            cashWithdrawOtc(params).then( res => {
              if( res.code == 200 ){
                toast('提现成功');
                thiz.$refs.cashVerfiyCode.hide();
                this.$router.push({path : 'cashwithdrawResult'});
              }else if( res.code == 609 ){
                thiz.$refs.dl.dialogShow();
              }else{
                toast(res.message);
              }
            });
            break;
        }
      }
    }
  }
</script>
<style lang="less" scoped>
  @import "../common/style/common";
  @import "../common/style/public.css";
  #sec1{
    min-height: 725px;
    >.title{
      padding-top: 24px;padding-bottom: 15px;color: #999999;
      &:nth-child(2){
        padding-top: 37px;
      }
    }
    >.d2{
      overflow: hidden;
      >.d1{
        float: left;
      }
      >.s2{
        float: left;line-height: 40px;height: 40px;display: inline-block;color: #666;padding-left: 21px;
      }
      input , /deep/ input{
        .input;width: 464px;height: 40px;.borderRadius;padding: 0 9px;
      }
    }
    >.d3{
      input{
        .input;width: 464px;height: 40px;.borderRadius;padding: 0 9px;
      }
    }
    >.d4{
      overflow: hidden;
      >.d1{
        float: left;
      }
      >.s2{
        float: left;.colorYellow;line-height: 40px;height: 40px;display: inline-block;padding-left: 21px;
      }
      input , /deep/ input{
        .input;width: 464px;height: 40px;.borderRadius;padding: 0 9px;
      }
    }
    >.d5{
      padding-top: 35px;
      >button{
        .submit(40px);width: 140px;line-height: 40px;font-size: 16px;
      }
    }
  }
</style>
